'use client'

import LineCanvas from '@/components/effect/LineCanvas'
import GradientButton from '../common/GradientButton'
import OutlineButton from '../common/OutlineButton'
import { useRouter } from 'next/navigation'

export default function CallToAction() {
  const router = useRouter()

  return (
    <div className="w-full relative h-[360px] overflow-hidden " aria-hidden="true">
      <div className="absolute bottom-0 right-[-100px] h-[1000px] w-[2000px] ">
        <LineCanvas />
      </div>

      {/* 内容层 */}
      <div className="w-full z-10 flex items-center justify-center absolute inset-0 ">
        <div className="section-accent accent-1 absolute inset-0 z-0 h-full w-full"></div>

        <div className="w-full">
          <div className="relative text-center text-gray-300 py-28 px-6 md:px-12 overflow-hidden">
            {/* 背景渐层 / 可选动态特效 */}
            <div className="absolute inset-0 bg-gradient-to-tr from-[#1a1a2e]/40 via-[#0a0a1f]/30 to-[#0a0a1f]/0 pointer-events-none"></div>

            <div className="relative max-w-4xl mx-auto">
              {/* 标题 */}
              <h2 className="text-[44px] font-bold text-white mb-6">Give it a shot</h2>

              {/* 副标题 */}
              <p className="text-[18px] text-gray-400 max-w-3xl mx-auto leading-relaxed mb-10">
                Screen your first deck and get{' '}
                <span className="font-semibold">5 free deck screens per month, forever</span> — your next great deal
                might already be in your inbox.
              </p>

              {/* 按钮组 */}
              <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
                <OutlineButton
                  title="View Sample"
                  fontSize="14px"
                  width="118px"
                  height="36px"
                  radius="12px"
                  onClick={() => {
                    router.push('/sample')
                  }}
                />

                <GradientButton
                  title="Screen your first deck"
                  fontSize="14px"
                  width="168px"
                  height="36px"
                  radius="12px"
                  onClick={() => {}}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
